<template>
  <view class="x-title-text" :style="{'margin-bottom': `${styles.marginBottom || 0}rpx`, 'background-color': styles.backgroundColor}">
    <template v-if="detail.componentContentList[0]">
      <view class="title-text-content" :class="{'inline': detail.templateType === 12}" :style="{'text-align': contentStyle.textAlign}">
        <view class="title" :style="{'color': contentStyle.titleColor,'font-size': `${contentStyle.titleFontSize}px`,'font-weight': contentStyle.titleFontWeight }">{{detail.componentContentList[0].title}}</view>
        <view v-if="detail.componentContentList[0].remark" class="desc" :style="{'color': contentStyle.descColor,'font-size': `${contentStyle.descFontSize}px`,'font-weight': contentStyle.descFontWeight }">{{detail.componentContentList[0].remark}}</view>
      </view>
    </template>
  </view>
</template>

<script>

export default {
  name: 'XTitleText',
  components: {},
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {

    };
  },
  computed: {
    // 模块样式
    styles() {
      return this.detail.componentStyle || {};
    },

    contentStyle() {
      return this.detail.componentContentList[0] ? this.detail.componentContentList[0].contentStyle || {} : {};
    }
  },
  watch: {},
  created() {

  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.title-text-content{
  padding: 10px;
  word-break: break-all;
  .title{
    line-height: 1.375;
  }
  .desc{
    margin: 4px 0 0;
    line-height: 1.375;
  }
  &.inline{
    .title{
      display: inline-block;
    }
    .desc{
      display: inline-block;
      margin: 0 0 0 16px;
    }
  }
}
</style>
